<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2024-01-04 14:57:08
 * @Description: 
-->
<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-12-05 11:38:10
 * @Description: 
-->
<template>
    <div class="products-container">
        <ParallaxBox bgColor="#5f5f54">
            <div class="list">
                <div class=" list__col-1 vertical" data-aos="fade-in">
                    <div class="window-title">Confident, elegant, architectural.</div>
                    <div class="half-linebreak"></div>
                    <div class="window-body">Our limited-edition collaborations let the materials speak. They define the
                        point
                        where architecture
                        becomes furniture and furniture becomes the basis of a collector’s personal rituals.</div>
                </div>
            </div>
        </ParallaxBox>
        <div>
            <div class="linebreak"></div>
            <article class="product-odd list bg_white" v-for="(item, index) in productsList" :key="index">
                <div class="linebreak"></div>
                <div data-aos="fade" class="list__block-1-2 aos-init">
                    <div class="product-text  bg_white" :class="index % 2 === 0 ? 'left-text' : 'right-text'">
                        <div class="product-title">{{ item.title }}</div>
                        <div class="linebreak"></div>
                        <div class="product-body">{{ item.body }}</div>
                        <div class="linebreak"></div>
                        <span target="_blank" class="link fit-content  link-textmargin">{{ item.linkText
                        }}</span>
                    </div>
                </div>
                <div class="list__block-1-2">
                    <div data-aos="fade-up" class="square aos-init">
                        <div class="square__inner">
                            <img :src="$picHander(item.img, 'zoom_large')" class="image image--loaded image--full-width">
                        </div>
                    </div>
                </div>
                <div class="linebreak"></div>
            </article>
        </div>
        <div class="dbl-linebreak"></div>
        <div class="flex flex-row justify-center">
            <nuxt-link to="/contact">
                <HoverButtons btnText="Contact us" data-aos="zoom-in" />
            </nuxt-link>
        </div>
        <div class="dbl-linebreak"></div>
    </div>
</template>

<script setup>
const productsList = ref([
    {
        title: 'Lucas for Sutherland',
        body: 'Inspired by minimalist sculpture, the elegant contrast of teak, stone andmetal acts as art and frame in a single object.Thoughtful proportions encourage conversation among pairs or parties.',
        linkText: 'Shop the Gallery collection',
        href: '',
        img: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/20231216124424.jpg'
    },
    {
        title: 'Lucas for Restoration Hardware',
        body: 'Strong, simple and most importantly, comfortable. A piece inviting hours of relaxation. Originally designed in collaboration with Sutherland for a private oceanside property.',
        linkText: 'Shop the Olema collection',
        href: '',
        img: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/20231216124424.jpg'
    },
    {
        title: 'Lucas for LUMA',
        body: 'The culmination of many years working together on bespoke residential projects, every detail represents an original thought and master craftsmanship from a team of skilled designers and artisans.',
        linkText: 'Shop LUMA Design Workshop',
        href: '',
        img: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/20231216124424.jpg'
    }
])
const { $picHander } = useNuxtApp()
</script>

<style lang="scss" scoped>
.product-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-flow: column;
    flex-flow: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@media screen and (max-width: 767px) {
    .product-text {
        padding-top: 10%;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.product-text .product-body {
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem
}

@media screen and (min-width: 2200px) {
    .product-text .product-body {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .product-text .product-body {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product-text .product-body {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem;

    }
}

@media screen and (max-width: 767px) {
    .product-text .product-body {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

.product-text .product-title {
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem
}

@media screen and (min-width: 2200px) {
    .product-text .product-title {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .product-text .product-title {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product-text .product-title {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    .product-text .product-title {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

.product-text .product-list {
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem
}

@media screen and (min-width: 2200px) {
    .product-text .product-list {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .product-text .product-list {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product-text .product-list {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    .product-text .product-list {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

.right-text {
    padding-left: 25%
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .right-text {
        padding-left: 0%
    }
}

@media screen and (max-width: 767px) {
    .right-text {
        padding-left: 0%
    }
}

.left-text {
    padding-right: 25%
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .left-text {
        padding-right: 0%
    }
}

@media screen and (max-width: 767px) {
    .left-text {
        padding-right: 0%
    }
}

.product-odd {
    display: flex;
    flex-flow: row-reverse wrap;

    &:nth-child(2n) {
        display: flex;
        flex-flow: row wrap;
    }
}

@media screen and (max-width: 767px) {
    .product-odd {
        display: flex;
        flex-flow: row wrap-reverse;

        &:nth-child(2n) {
            display: flex;
            flex-flow: row wrap-reverse;
        }
    }
}
</style>
